---
title: Set a component's background image
description: Learn how to use ImageBackground component to set a component's background image.
---

import { ContentSpotlight } from '~/ui/components/ContentSpotlight';
import { SnackInline } from '~/ui/components/Snippet';

The [`ImageBackground` component](https://reactnative.dev/docs/imagebackground) lets you display an image as the background of another component in Expo and React Native apps. For example, you can set the background image of a screen in your app with `ImageBackground` inside the screen's container view.

This component is conceptually similar to CSS's `background-image` stylesheet property and the `backgroundImage` DOM style property.

## How to use `ImageBackground`

The `ImageBackground` component accepts mostly the same props as the `Image` component with a few differences:

- The `style` prop is applied to a view that wraps an inner image.
- The `imageStyle` prop is applied to the image itself.
- The `imageRef` prop also is applied to the inner image.

## Example

<SnackInline label="Using ImageBackground component">

{/* prettier-ignore */}
```tsx
import { /* @info Import ImageBackground from react-native */ImageBackground/* @end */, StyleSheet, Text, View } from 'react-native';

const image = { uri: "https://docs.expo.dev/static/images/tutorial/background-image.png" };

export default function App() {
  return (
  <View style={styles.container}>
    <ImageBackground source={image} style={styles.image}>
      /* @info Nest your content inside of the ImageBackground component */
      <Text style={styles.text}>Elements</Text>
      <Text style={styles.text}>in Front of</Text>
      <Text style={styles.text}>Background</Text>
      /* @end */
    </ImageBackground>
  </View>
  );
}

const styles = StyleSheet.create({
  container: {
    /* @info Make the containing view fill the screen */
    flex: 1,
    /* @end */
    flexDirection: 'column',
  },
  image: {
    /* @info Make the image fill the containing view */
    flex: 1,
    /* @end */
    /* @info Scale up the image to fill the container, preserving aspect ratio */
    resizeMode: 'cover',
    /* @end */
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: '#000000a0',
  },
});
```

</SnackInline>

The example above renders a screen as following:

<ContentSpotlight
  className="max-w-[276px]"
  src="/static/images/imagebackground-example.png"
  alt="Text rendered on top of an image background"
/>
